<template>
		<el-container class='home-container'>
			<el-header>
				<div>
					<img src="../assets/heima.png" alt="">
					<span>电商后台管理系统</span>
				</div>
				<el-button type="info" @click='logout'>退出</el-button>
			</el-header>
			<el-container>
				<el-aside :width="isCollapse ? '64px' : '200px'">
					<div class="toggle-button" @click="toggleCollapse">|||</div>
					 <el-menu
					      background-color=" #313743"
					      text-color="#fff"
					      active-text-color="#276AC2"
						  unique-opened = true
						  :collapse="isCollapse"
						  :collapse-transition="false"
						  :router="true"
						  :default-active=activePath>
					      <el-submenu :index="item.id+''" v-for="item of menuList" :key='item.id'>
					        <template slot="title">
					          <i :class="iconObj[item.id]"></i>
					          <span>{{item.authName}}</span>
					        </template>
							<el-menu-item :index="'/' + item2.path" v-for="item2 of item.children" :key='item2.id' @click="saveNavStatus('/' + item2.path)">
								<template slot="title">
								  <i class="el-icon-menu"></i>
								  <span>{{item2.authName}}</span>
								</template>
							</el-menu-item>
					      </el-submenu>
					    </el-menu>
				</el-aside>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
</template>

<script>
	export default {
		data(){
			return {
				menuList:[],
				iconObj:{
					'125':'iconfont icon-users',
					'103':'iconfont icon-tijikongjian',
					'101':'iconfont icon-shangpin',
					'102':'iconfont icon-danju',
					'145':'iconfont icon-baobiao',
				},
				isCollapse:false,
				activePath:''
			}
		},
		created(){
			this.getMenuList();
			this.activePath = window.sessionStorage.getItem('activePath');
		},
		methods: {
			logout() {
				window.sessionStorage.clear();
				this.$router.push('/');
			},
			async getMenuList(){
				const {data:res} = await this.$http.get('menus');
				if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
				this.menuList = res.data;
				// console.log(res);
			},
			toggleCollapse(){
				this.isCollapse = !this.isCollapse;
			},
			saveNavStatus(activePath){
				window.sessionStorage.setItem('activePath',activePath);
				this.activePath = activePath;
			},
		}
	}
</script>

<style scoped>
	.home-container{
		height: 100%;
	}
	.el-header{
		background-color: #363D40;
		display: flex;
		justify-content: space-between;
		padding-left: 0px;
		align-items: center;
		color: aliceblue;
		font-size: 20px;
	}
	.el-header > div {
			display: flex;
			align-items: center;
		}
	.el-header > div > span {
			margin-left: 15px;
		}
	.el-aside{
		background-color: #313743;
	}
	.el-main{
		background-color: #E9EDF1;
	}
	.iconfont{
		margin-right: 10px;
	}
	.el-menu{
		border-right: 0px;
	}
	.toggle-button{
		background-color: #4A5064;
		font-size: 10px;
		line-height: 24px;
		color: #DDDDDD;
		text-align: center;
		letter-spacing: 0.2em;
		cursor: pointer;
	}
</style>
